<template>
	<view class="">
		<navigator :url="'/pages/article/detail?id=' + (item.art_id || 0)" @longpress="doAct(item)">
			<view class="container">

				<view class="replys-box" v-if="item.parent_comment">
					<text class="floor-tag">{{item.floor}} 楼</text>
					<view class="reply-header">
						<view class="reply-box">
							<text class="reply-label">{{item.parent_comment}}</text>
							<view class="info-columns">
								<text class="column-label">{{item.parent_floor}} 楼</text>
								<text class="column-label">{{item.format_time}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="content-section">
					<text class="content-text">{{item.comment}}</text>
				</view>
				<view class="content-section">
					<text class="article-title">{{item.articleInfo ? item.articleInfo.title : ''}}</text>
					<text class="time-info">{{item.format_time}}</text>
				</view>
			</view>
		</navigator>

	</view>
</template>

<script setup>
	import {
		apiDelComment
	} from '@/api/apis';

	defineProps(['item'])
	const doAct = (item) => {
		uni.showActionSheet({
			itemList: ['删除'],
			success: (res) => {
				if (res.tapIndex == 0) {
					uni.showModal({
						title: "温馨提示",
						content: "确定要删除这个评论吗?",
						success: async res => {
							if (res.confirm) {
								await apiDelComment({
									id: item.id
								}).then(res => {
									if (res.code == 200) {
										uni.showToast({
											title: "删除成功"
										})
									}
								})
							}
						}
					})
				}
			}
		});
		return
	}
</script>

<style scoped>
	.container {
		position: relative;
		padding: 12px;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #eee;
	}

	.reply-header {
		position: relative;
		margin-bottom: 12px;
	}

	.floor {
		text-align: right;
		margin: 20rpx 0;
		font-size: 28rpx;

	}

	.reply-box {
		border-radius: 20rpx;
		padding: 10px 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #eee;
		margin: 20rpx 0;
	}

	.reply-label {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.info-columns {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.column-label {
		font-size: 12px;
		color: #999999;
	}

	.floor-tag {
		position: absolute;
		top: 12rpx;
		right: 12rpx;
		z-index: 999;
		font-size: 14px;
		color: #333333;
	}

	.content-section {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
	}

	.content-text {
		font-size: 15px;
		color: #000000;
		flex: 1;
	}

	.article-title {
		font-size: 15px;
		color: #007AFF;
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.time-info {
		font-size: 12px;
		color: #999999;
		margin-left: 8px;
	}
</style>